<template>
  <div id="PublishRecruitment">
    <el-row>
      <el-col :span="4" style="margin-top:1em;">
        <div class="div_border_title">
          <h2>公司信息</h2>
        </div>
      </el-col>
      <el-col :span="3" class="editButton">
        <p @click="editBasciInfo()"><i class="el-icon-edit"></i> 编辑信息</p>
      </el-col>
    </el-row>
    <div v-if="isEdit===false">
      <el-row class="info-row" :style="{'margin-top': '20px'}">
        <el-col :span="4">
          <div class="info-title">
            <h3><i class="required">* </i>公司姓名</h3>
          </div>
        </el-col>
        <el-col :span="8">
          <div class="info-content">
            {{ companyInfo.company_name || '未填写'}}
          </div>
        </el-col>
        <el-col :span="4">
          <div class="info-title info-title-right">
            <h3><i class="required">* </i>公司地址</h3>
          </div>
        </el-col>
        <el-col :span="8">
          <div class="info-content">
            {{ companyInfo.company_address || '未填写'}}
          </div>
        </el-col>
      </el-row>
      <el-row class="info-row">
        <el-col :span="4">
          <div class="info-title">
            <h3><i class="required">* </i>所属行业</h3>
          </div>
        </el-col>
        <el-col :span="8">
          <div class="info-content">
            {{ companyInfo.industry_name || '未填写'}}
          </div>
        </el-col>
        <el-col :span="4">
          <div class="info-title info-title-right">
            <h3><i class="required">* </i>公司类型</h3>
          </div>
        </el-col>
        <el-col :span="8">
          <div class="info-content">
            {{ getStaticMapData('company_type', companyInfo.company_type) || '未填写'}}
          </div>
        </el-col>
      </el-row>
      <el-row class="info-row">
        <el-col :span="4">
          <div class="info-title">
            <h3><i class="required">* </i>联系人</h3>
          </div>
        </el-col>
        <el-col :span="8">
          <div class="info-content">
            {{ companyInfo.contact_person || '未填写'}}
          </div>
        </el-col>
        <el-col :span="4">
          <div class="info-title info-title-right">
            <h3><i class="required">* </i>联系电话</h3>
          </div>
        </el-col>
        <el-col :span="8">
          <div class="info-content">
            {{ companyInfo.tel || '未填写'}}
          </div>
        </el-col>
      </el-row>
      <el-row class="info-row">
        <el-col :span="4">
          <div class="info-title">
            <h3>公司邮箱</h3>
          </div>
        </el-col>
        <el-col :span="8">
          <div class="info-content">
            {{ companyInfo.email || '未填写'}}
          </div>
        </el-col>
        <el-col :span="4">
          <div class="info-title info-title-right">
            <h3>公司网址</h3>
          </div>
        </el-col>
        <el-col :span="8">
          <div class="info-content">
            {{ companyInfo.company_website || '未填写'}}
          </div>
        </el-col>
      </el-row>
      <el-row class="info-evaluation">
        <el-col :span="4">
          <div class="info-title">
            <h3>公司简介</h3>
          </div>
        </el-col>
        <el-col :span="20">
          <div class="info-content" v-html="companyInfo.company_profile">

          </div>
        </el-col>
      </el-row>
    </div>
    <div v-else>
      <CompanyInformationEdit @returnState="getState"></CompanyInformationEdit>
    </div>
    <el-row style="margin-top:1em;">
      <el-col :span="4" style="margin-top:1em;">
        <div class="div_border_title">
          <h2>职位信息</h2>
        </div>
      </el-col>
      <el-col :span="3" class="editButton">
        <p @click="addPositionInfo()"><i class="el-icon-plus"></i>新增职位</p>
      </el-col>
    </el-row>
    <el-row v-if="isAdd===false">
      <el-col :span="17" :style="{'margin-top': '20px'}">
        <el-table :data="positionData" border fit highlight-current-row tooltip-effect="light"
                  @selection-change="selectChange" ref="multipleTable">
          <el-table-column type="selection" width="50"></el-table-column>
          <el-table-column type="index" label="序号" width="70"></el-table-column>
          <el-table-column prop="job_title" label="职位" show-overflow-tooltip>
          </el-table-column>
          <el-table-column prop="recruits_count" label="招聘人数(人)">
          </el-table-column>
          <el-table-column prop="recruitment_type" label="招聘方式" :formatter="formatterType" show-overflow-tooltip>
          </el-table-column>
          <el-table-column prop="salary" label="薪资待遇(元)" show-overflow-tooltip>
          </el-table-column>
        </el-table>
        <el-pagination @current-change="handleCurrentChange" layout="total, prev, pager, next" :total="total"
                       class="table-page-style"></el-pagination>
        <el-button type="primary" size="large" style="margin:1em 2em;float:right;" @click="PublishRecruitment">发布
        </el-button>
      </el-col>
      <el-col :span="6" style="float:right;margin-top:20px;">
        <el-card>
          <div class="qiuck-choose">快捷选择<br>(以往的历史记录)</div>
          <p v-if="historyList.length === 0">暂无记录</p>
          <el-radio-group v-model="radio" v-else @change="clickRadio">
            <el-radio v-for="(item,index) in historyList" :key="index" :label="item.program_id" class="radio-list">
              {{item.program_name}}<i class="el-icon-delete" @click="delProgram(item.program_id)"></i></el-radio>
          </el-radio-group>
        </el-card>
      </el-col>
    </el-row>
    <div v-else style="margin-top:2em;">
      <CompanyJobPublishCommon :id="'newpublish'" @returnStatus="getStatus"></CompanyJobPublishCommon>
    </div>

    <el-dialog title="备注" size="tiny" :visible.sync="isEditProgram">
      <el-form label-position="left" label-width="100px" :rules="rules">
        <el-form-item label="方案名称" prop="name" required>
          <el-input v-model="programName"></el-input>
        </el-form-item>
        <el-form-item style="margin-left:30px;">
          <el-button type="primary" @click="saveProgramName">保存</el-button>
          <el-button @click="Cancel">取消</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>
<script>
  import { postDataToServer } from '../../assets/js/post.js'
  import { getStaticMapList } from '../../assets/js/GlobeDefine.js'
  import { changeSalaryStyle } from '../../assets/js/common.js'
  import CompanyInformationEdit from '@/components/setInfo/CompanyInformationEdit'
  import CompanyJobPublishCommon from '@/components/companyPublish/CompanyJobPublishCommon'

  export default {
    name: 'PublishRecruitment',
    data () {
      var validateName = (rule, value, callback) => {
        if (this.programName === '') {
          callback(new Error('请为本次方案取个名吧！'))
        }
        callback()
      }
      return {
        rules: {
          name: [
            {validator: validateName, trigger: 'blur'}
          ]
        },
        companyInfo: {},
        positionData: [],
        historyList: [],
        radio: 1,
        isEdit: false,
        isAdd: false,
        total: 0,
        page_no: 1,
        programName: '',  //方案名称
        programId: '',  //方案ID
        isEditProgram: false,
        selectID: [],
        programListID: ''
      }
    },
    created () {
      this.getCompanyInfor()
      this.getPositionData(1)
      this.getHistoryList()
    },
    methods: {
      getCompanyInfor () {
        let _this = this
        postDataToServer('COMPANY_GET').then((data) => {
          if (data.status === 0) {
            _this.companyInfo = data.data_list
          }
        })
      },
      getPositionData (page) {
        let _this = this
        let data = new Object()
        data.page_no = page
        data.page_size = 30
        postDataToServer('HM_COMPANY_JOB_LISTPAGE', data).then(function (data) {
          _this.total = data.total_results
          _this.positionData = data.data_list
          _this.positionData.forEach((e) => {
            e = changeSalaryStyle(e)
          })
        })
      },
      editBasciInfo () {
        if (this.isEdit === true) {
          this.$message({
            message: '请先保存当前信息!',
            type: 'warning',
          })
        } else {
          this.isEdit = true
        }
      },
      addPositionInfo () {
        if (this.isAdd === true) {
          this.$message({
            message: '请先保存当前信息!',
            type: 'warning',
          })
        } else {
          this.isAdd = true
        }
      },
      getState (state) {  //接收编辑公司信息的状态
        if (state === true) {
          this.isEdit = false
          this.getCompanyInfor()
        } else {
          this.isEdit = false
        }
      },
      getStatus (status) {   //接收新增职位信息的状态
        if (status === true) {
          this.isAdd = false
          this.getPositionData(1)
        } else {
          this.isAdd = false
        }
      },
      formatterType (row, column) {
        return getStaticMapList('recruitment_type', row.recruitment_type)
      },
      getStaticMapData (type, value) {
        return getStaticMapList(type, value)
      },
      handleCurrentChange (pageNum) {
        this.page_no = pageNum
      },
      PublishRecruitment () {
        if (this.selectID.length > 0) {
          this.isEditProgram = true
        } else if (this.programListID !== '') {
          this.$emit('returnStep', 3)
          this.$emit('returnData', this.programListID)
        } else {
          this.$message({
            type: 'warning',
            message: '请先选择需要发布的职位'
          })
        }
      },
      //获取选中的职位信息
      selectChange (selection) {
        this.selectID = selection
      },
      //获取以往的发布历史
      getHistoryList () {
        let _this = this
        postDataToServer('COMPANY_PROGRAM_ALL_LISTALL', {})
          .then(function (data) {
            if (data.status === 0) {
              _this.historyList = _this.dedupe(data.data_list)
            }
          })
      },
      dedupe (data) {  //转化数据结构
        let historyArr = new Array()
        data.forEach((e) => {
          let historyObj = new Object()
          historyObj.program_id = e.program_id
          historyObj.program_name = e.program_name
          historyArr.push(historyObj)
        })
        let hash = {}
        historyArr = historyArr.reduce(function (item, next) {
          hash[next.program_id] ? '' : hash[next.program_id] = true && item.push(next)
          return item
        }, [])
        return historyArr
      },
      clickRadio (value) {
        this.programListID = value
        // this.getJobList(value);
        // this.$emit('returnData',value);
      },
      getJobList (id) {
        let _this = this
        let params = new Object()
        params.program_id = id
        postDataToServer('COMPANY_PROGRAM_LISTALL', params).then((data) => {
          if (data.status === 0) {
            _this.toggleSelection(data.data_list)
          }
        })
      },
      toggleSelection (rows) {
        if (rows) {
          rows.forEach(row => {
            this.$refs.multipleTable.toggleRowSelection(row)
          })
        } else {
          this.$refs.multipleTable.clearSelection()
        }
      },
      //保存本次方案的名字并发布招聘信息
      saveProgramName () {
        let _this = this
        let param = new Object()
        param.program_name = _this.programName
        postDataToServer('COMPANY_PROGRAM_ADD', param)
          .then(function (data) {
            if (data.status === 0) {
              _this.programId = data.data_list.id
              _this.selectID.forEach((item) => {
                _this.PublishInfor(_this.programId, item.id)
              })
              _this.isEditProgram = false
              _this.$message({
                message: '发布成功',
                type: 'success',
              })
              _this.$emit('returnStep', 3)
              _this.$emit('returnData', _this.programId)
            }
          })
      },
      //取消发布
      Cancel () {
        this.programName = '',
          this.isEditProgram = false
        this.$message({
          message: '本次发布已取消!',
          type: 'warning',
        })
      },
      PublishInfor (programId, jobId) {
        let _this = this
        let param = new Object()
        param.program_id = programId
        param.job_id = jobId
        postDataToServer('COMPANY_PROGRAM_JOB_ADD', param)
          .then(function (data) {
            if (data.status === 0) {

            }
          })
      },
      //删除方案
      delProgram (id) {
        let _this = this
        let param = new Object()
        param.id = id
        postDataToServer('COMPANY_PROGRAM_DEL', param)
          .then(function (data) {
            if (data.status === 0) {
              _this.getHistoryList()
            }
          })
      }
    },
    components: {
      CompanyInformationEdit,
      CompanyJobPublishCommon
    },
    watch: {
      page_no (val, oldVal) {
        this.getPositionData(val)
      }
    }
  }
</script>

<style scoped>
  .required {
    color: red;
  }

  .editButton {
    float: right;
    margin-top: 2em;
    margin-right: 30px;
    background-color: #20A0FF;
    cursor: pointer;
  }

  .editButton p {
    font-size: 1em;
    padding: 5px 0px;
    border: 0;
    color: white;
    text-align: center;
  }

  .info-row {
    border-left: 1px solid #dddddd;
    border-right: 1px solid #dddddd;
    border-top: 1px solid #dddddd;
    height: 45px;
  }

  .info-row .info-title-right {
    border-left: 1px solid #dddddd;
  }

  .info-row .info-title {
    background-color: #f3f3f3;
    font-size: 0.8em;
    text-align: center;
    line-height: 45px;
  }

  .info-row .info-content {
    border-left: 1px solid #dddddd;
    line-height: 45px;
    padding-left: 10px;
    font-size: 1em;
  }

  .info-evaluation {
    border: 1px solid #dddddd;
    background-color: #f3f3f3;
  }

  .info-evaluation .info-title {
    font-size: 0.8em;
    text-align: center;
  }

  .info-evaluation .info-content {
    padding-left: 20px;
    background-color: white;
    min-height: 40px;
    border-left: 1px solid #dddddd;
  }

  /*右侧快捷方式键样式*/
  .qiuck-choose {
    border-bottom: 1px solid #e8e8e8;
    padding: 0px 20px 15px;
  }

  .radio-list {
    float: left;
    width: 100%;
    margin: 1.5em auto 0.5em;
    margin-left: 3em;
  }

  .radio-list i {
    margin-left: 15%;
    color: #696969;
  }

  .radio-list i:hover {
    color: red;
  }

  .btn {
    margin-bottom: 1.5em;
    float: right;
  }
</style>
